<template>
	<view class="comp-box" style="padding: 24rpx;">
		<!-- 公司介绍 -->
		<view class="part2" style="padding-bottom: 150rpx;">
			<view class="title-box u-flex u-row-between">
				<text class="title-text">公司介绍</text>
			</view>

			<view class="part2-con" style="position: relative;padding: 0 10rpx;">
				<view class="isshow u-flex u-row-between">
					<text>是否展示公司介绍</text>
					<switch :checked="isShowItem" @change="isShowItem = !isShowItem" color="rgba(29, 168, 254, 1)" style="transform: scale(0.8);"></switch>
				</view>
				<view class="type-all" style="padding-bottom: 60rpx;">
					<view class="type-name u-flex"
						style="background-color: rgba(242, 242, 242, 1);border-radius: 24rpx 24rpx 0rpx 0rpx;padding: 0 12rpx;">
						<text style="line-height: 120rpx;font-size: 32rpx;font-weight: bold;">公司描述</text>
						<view @click="$refs['inputPop'].open()" class="u-flex u-flex-1"
							style="background-color: #FFFFFF;margin-left: 20rpx; border-radius: 20rpx;">
							<input disabled style="background-color: #FFFFFF;height: 64rpx;flex: 1;"
								type="text" value="" v-model="typeList[0] && typeList[0].subtitle"
								placeholder="请输入理公司描述" />
							<text
								class="num-text">（{{typeList[0] && typeList[0].subtitle && typeList[0].subtitle.length || 0}}/{{maxlength}}）</text>
						</view>
					</view>
					<view @click="proIndex = index2" class="form u-flex-col" v-for="(item2,index2) in typeList"
						:key="index2"
						style="background-color: rgba(247, 248, 252, 1);padding: 0 12rpx;box-sizing: border-box;">
						<view class="pro-list">
							<view class="img-con">
								<view class="img-title">图片<text style="color: #FF3434;margin-left: 5rpx;">*</text><text
										class="num-text">（{{item2.sendImg && item2.sendImg.length|| 0}}/2）</text>
								</view>
								<u-upload :showProgress="false" @on-uploaded="uploadSuccess" @on-remove="uploadRemove"
									:action="`https://job.ydylmold.cn/base/upload/file`"
									:formData="{fileCode:139,fileType:100,fileParaName:'file'}" width="288rpx"
									height="238rpx" :fileList="item2.fileList" maxCount="2">
								</u-upload>
							</view>
							<view class="form-item">
								<view class="img-title" style="line-height: 100rpx;">图片标题<text
										style="color: #FF3434;margin-left: 5rpx;">*</text><text
										class="num-text">（{{item2.productName && item2.productName.length || 0}}/7）</text>
								</view>
								<view class="form-right u-flex" style="margin:10rpx 0 18rpx 0;">
									<input :adjust-position="false" v-model="item2.productName" 
										type="text" value="" maxlength="7" placeholder="请输入" />
								</view>
							</view>
							<view class="form-item">
								<view class="img-title" style="line-height: 100rpx;">图片描述<text
										style="color: #FF3434;margin-left: 5rpx;">*</text><text
										class="num-text">({{item2.remarks && item2.remarks.length || 0}}/100)</text>
								</view>

								<textarea style="width: 596rpx;height: 220rpx;" :adjust-position="false"
									class="textarea" value="" v-model="item2.remarks" placeholder="请输入"
									maxlength="100" />
							</view>
							<view class="btns u-flex u-row-right u-m-t-40 u-m-b-10" @click="delPro(item2,index2)">
								<text class="del-button">
									删除
								</text>
							</view>
						</view>
					</view>
					<view class="add-type" @click="insertPro()">+ 添加</view>
				</view>
			</view>
		</view>
		<view class="fix-btn"
			style="z-index: 999;position: fixed;bottom: 0;right: 0;padding: 0rpx 24rpx 10rpx 24rpx;width: 100%;background-color: #FFFFFF;">
			<button type="primary" @click="$u.throttle(saveItem, 2000)"
				style=" background-color: rgba(29, 168, 254, 1);margin-top: 20rpx;border-radius: 48rpx;">保存</button>
		</view>
		<!-- 输入框弹出框 -->
		<uni-popup ref="inputPop" type="dialog">
			<uni-popup-dialog :maxlength="maxlength" mode="input" @close="$refs['inputPop'].close()" @confirm="confirm"
				:value="typeList[0] && typeList[0].subtitle && typeList[0].subtitle" title="理由描述">
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {
		queryUsrCompanyStationList,
		insertCompanyStation,
		deleteUsrCompanyStationById
	} from '@/common/api/auth.js'
	import upVideo from '@/utils/uploadVideo.js'
	import {
		getToken
	} from '@/utils/token.js'
	import {
		uploadFilePromise
	} from '@/utils/upload.js'
	export default {
		data() {
			return {
				typeList: [{
					imgName: '',
					remarks: '',
					stationType: 6,
					productName: '',
					moduleNo: "ydylapp1002",
					companyId: getToken('useNum'),
					stationId: '',
					sendImg: [],
					subtitle: ''
				}],
				proIndex: 0,
				canSave: {
					proSave: true,
				},
				isChange: {
					proData: false,
				},
				maxlength: 50,
				isShowItem:false
			}
		},
		onLoad: function() {
			this.init()
		},
		methods: {
			confirm(e) {
				this.typeList.forEach(m => {
					m.subtitle = e
				})
			},
			changeVideo(e) {
				this.proIndex = e
				let that = this
				uni.chooseVideo({
					count: 1,
					sourceType: ['camera', 'album'],
					sizeType: ['compressed'],
					name: 'file',
					success: async res => {
						that.isChange.videoData = true
						// #ifdef H5
						upVideo.init({
							fileObj: res, //视频文件 必传
							fileCode: 173,
							size: 5, //分片大小  选填 默认2单位M
							upOverFn(e) { //上传完成生命周期 选填
								that.typeList[that.proIndex].productVideo = e
								let obj = that.typeList[that.proIndex]
								obj.productVideo = e
								that.$set(that.typeList, that.proIndex, obj)
							}
						})
						// #endif
						// #ifdef MP-WEIXIN
						that.isChange.videoData = true
						let params = {
							params: {}
						}
						params['params']['fileType'] = 101
						params['params']['fileCode'] = 173
						params['url'] = res.tempFilePath
						const result = await uploadFilePromise(params)
						this.typeList[this.proIndex].productVideo = result
						// #endif

					}
				});
			},

			//删除某个项
			delPro(item, index) {
				uni.showModal({
					title: '提示',
					content: '您确定要删除' + item.productName + '吗?',
					success: (e) => {
						if (e.confirm) {
							if (item.stationId) {
								deleteUsrCompanyStationById({
									stationId: item.stationId
								}).then(res => {
									if (res.data && res.data.code == 1) {
										this.$u.toast(res.data.msg || res.data.message || '删除成功')
										this.typeList.splice(index, 1)
									} else {
										this.$u.toast(res.data.msg || res.data.message || '删除失败')
									}
								})
							} else {
								this.typeList.splice(index, 1)
							}
						}
					}
				})
			},

			// 初始化数据
			async init() {
				let res = await this.queryUsrCompanyStationList()
				if (res.data && res.data.code == 1) {
					let acInfo = {}
					// 数组分类
					let data = res.data && res.data.listData
					let arrAll = data.filter(m => {
						return m.stationId != ''
					})
					this.isShowItem = arrAll[0].state == 1?true:false
					if (arrAll && arrAll.length) {
						arrAll.forEach((pro, idx) => {
							if (pro.imgName) {
								pro.sendImg = pro.imgName.split(',')
								pro.fileList = pro.imgName.split(',').map(v => {
									return {
										url: 'https://www.ydylmold.cn/file/getPlayResource/139/' +
											v
									}
								})
							}
						})
						this.typeList = arrAll
					}


				}
			},
			//公司更多数据详情
			queryUsrCompanyStationList() {
				return queryUsrCompanyStationList({
					companyNo: getToken('useNum'),
					stationType: 6
				})
			},
			//保存数据
			saveItem() {
				let params = {}
				this.checkSave()
				if (this.canSave.proSave) {
					let arr = []
					let sendArr = []
					this.typeList.forEach((item, index) => {
						sendArr.push({
							updateImage: item.sendImg.join(','),
							stationId: item.stationId || "",
							companyId: item.companyId || getToken('useNum'),
							moduleNo: 'ydylapp1002',
							stationType: item.stationType || 6,
							productName: item.productName || '',
							subtitle: item.subtitle || '',
							remarks: item.remarks || '',
							state:this.isShowItem?1:0
						})
					})
					params.jsonData = JSON.stringify(sendArr)
					this.editFun(params)
				}
			},
			editFun(params) {
				insertCompanyStation(params).then(res => {
					if (res.data && res.data.code == 1) {
						uni.hideLoading()
						this.$u.toast('保存成功')
						setTimeout(()=>{
							uni.navigateBack()
						},500)
						this.$store.commit('isFresh', true)
					} else {
						this.$u.toast('保存失败')
					}
				})
			},
			delType(item, index) {
				uni.showModal({
					title: '提示',
					content: '您确定要删除' + (item[0] && item[0].subtitle) + '吗?',
					success: (e) => {
						if (e.confirm) {
							this.typeList.splice(index, 1)
						}
					}
				})
			},

			//添加一个理由
			insertPro() {
				this.isChange.proData = true
				this.checkSave()
				if (this.canSave.proSave) {
					this.typeList.push({
						imgName: '',
						remarks: '',
						stationType: 6,
						productName: '',
						moduleNo: "ydylapp1002",
						companyId: getToken('useNum'),
						stationId: '',
						sendImg: [],
						subtitle: this.typeList && this.typeList[0] && this.typeList[0].subtitle
					})
				}
			},
			checkSave() {
				this.canSave.proSave = true
				this.typeList.forEach((item, index) => {
					if (!item.productName) {
						this.$u.toast('第' + (index + 1) + '条记录,图片标题未填完整')
						this.canSave.proSave = false
					}
					if (item.sendImg && item.sendImg.length == 0) {
						this.$u.toast('第' + (index + 1) + '条记录,图片未上传')
						this.canSave.proSave = false
					}
					if (!item.remarks) {
						this.$u.toast('第' + (index + 1) + '条记录,描述未填完整')
						this.canSave.proSave = false
					}


				})

			},
			//图片上传
			uploadRemove(e, list, index, delItem) {
				this.isChange.proData = true
				let arr = this.typeList[this.proIndex]
				arr.sendImg.splice(e, 1)
				this.typeList[this.proIndex] = arr
			},
			getImgArr(data) {
				let arrImg = []
				let arr = []
				data.forEach(v => {
					if (v.url && !v.response) {
						arr = v.url.split('/')
						arrImg.push(arr[arr.length - 1])
					} else {
						arrImg.push(v.response.data)
					}
				})
				return arrImg
			},
			//图片上传成功
			uploadSuccess(e) {
				this.isChange.proData = true
				let acArr = this.typeList[this.proIndex]
				acArr.sendImg = this.getImgArr(e)
				this.typeList[this.proIndex] = acArr
			},

		}
	}
</script>

<style lang="scss">
	@import "./css/edit.scss";

	.num-text {
		font-size: 24rpx;
		font-weight: 500;
		color: rgba(128, 128, 128, 1);
		flex: none;
	}

	.input {
		background-color: #FFFFFF;
		flex: 1;
		height: 54rpx;
	}

	.form-right {
		flex: 1;
		border-bottom: 1rpx solid rgba(217, 217, 217, 1);
		margin-left: 10rpx;
		height: 54rpx;
	}

	.del-button {
		border: 1rpx solid rgba(56, 56, 56, 1);
		font-size: 24rpx;
		font-weight: bold;
		color: rgba(56, 56, 56, 1);
		padding: 10rpx 16rpx;
		border-radius: 30rpx;
		text-align: right;
	}

	.add-type {
		background-color: rgba(247, 248, 252, 1);
		border-radius: 0 0 24rpx 24rpx;
		font-size: 24rpx;
	}
</style>
